//首页（已作废）
<template>
    <div class="container">
        <div class="coal-blending-view">
            <div class="coal-blending-header">
                <p class="pull-left coal-blending-header-text-one">配煤概览</p>
                <p class="pull-left  coal-blending-header-text-two"></p>
            </div>
            <div class="coal-blending-content">
                <div class="coal-blending-content-left pull-left" id="coal-blending-content-left">

                </div>
                <div class="coal-blending-content-right pull-left">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>煤种</th>
                            <th>配比</th>
                            <th>灰分</th>
                            <th>挥发分</th>
                            <th>固定碳</th>
                            <th>硫</th>
                            <th>水分</th>
                            <th>全水分</th>
                            <th>Y</th>
                            <th>G</th>
                            <th>粉碎细度</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in coal_blending_table_data" :key="index">
                            <td>{{item.type}}</td>
                            <td>{{item.proportion}}</td>
                            <td>{{item.ash_content}}</td>
                            <td>{{item.volatiles}}</td>
                            <td>{{item.carbon}}</td>
                            <td>{{item.S}}</td>
                            <td>{{item.water}}</td>
                            <td>{{item.full_water}}</td>
                            <td>{{item.Y}}</td>
                            <td>{{item.G}}</td>
                            <td>{{item.mesh}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
        <div class="coking-view">
            <div class="coal-blending-header">
                <p class="pull-left coal-blending-header-text-one">焦炼概览</p>
                <p class="pull-left  coal-blending-header-text-two"></p>
            </div>
            <div class="coking-view-content" id="coking-view">

            </div>
            <div class="coking-button">
                <mt-button size="small" type="primary" v-for="(item,index) in coking_btn_list" :key="index" style="font-size: 12px">{{item}}</mt-button>
                <mt-button size="small" type="default" v-for="(item,index) in coking_btn_list_one" :key="index" style="font-size: 12px;margin-top: 5px">{{item}}</mt-button>
            </div>
        </div>
        <div class="dry-out">
            <div class="coal-blending-header">
                <p class="pull-left coal-blending-header-text-one">干熄概览</p>
                <p class="pull-left  coal-blending-header-text-two"></p>
            </div>
            <div class="dry-out-content" id="dry-out">

            </div>
        </div>
        <div class="chemical-industry">
            <div class="coal-blending-header">
                <p class="pull-left coal-blending-header-text-one">化工概览</p>
                <p class="pull-left  coal-blending-header-text-two"></p>
            </div>
            <div class="chemical-industry-content" style="width: 100%;height: 200px;">
                <p  style="width: 100%;height: 200px;line-height: 200px;text-align: center">化工待定</p>
            </div>
        </div>
        <div class="replace" style="width: 100%;height: 26px;">

        </div>

    </div>
</template>

<script>
    import echarts from "echarts";

    export default {
        name: "firingHome",
        data() {
            return {
                coking_btn_list:['K安6#影响原因','K安7#影响原因','K1影响原因','K2影响原因'],
                coking_btn_list_one:['2018/9/1煤粉水分大','2018/9/1煤粉水分大','2018/9/2结焦修改时间','2018/9/1煤粉水分大','2018/9/1煤粉水分大','2018/9/2结焦修改时间','2018/9/1煤粉水分大','2018/9/1煤粉水分大','2018/9/2结焦修改时间'],
                coal_blending_data_one: [120, 120, null, null,],
                coal_blending_data_two: [null, null, 100, 120],
                coal_blending_x: ['除氧器位A', '除氧器位B', '气泡位A', '气泡位B',],
                dry_out_x:['除氧器位A', '除氧器位B', '气泡位A', '气泡位B','气泡位A', '气泡位B','进口温度A','进口温度B','进口温度C','排焦温度A','排焦温度B','蒸汽温度A','蒸汽温度B'],
                dry_out_data_one: [120, 120 ],
                dry_out_data_two: [null,null, 120, 120, ],
                dry_out_data_three: [null, null, null, null,130,130],
                dry_out_data_four: [null, null, null, null,null,null,120,120,120],
                dry_out_data_five: [null, null, null, null,null,null,null,null,null,130,130],
                dry_out_data_six: [null, null, null, null,null,null,null,null,null,null,null,140,140],
                dry_out_data_seven: [200, 200, 200, 200,200,200,200,200,200,200,200,200,200],
                coal_blending_data_three:[200,200,200,200],
                coal_blending_table_data:[
                    {
                        type:'煤1',
                        proportion:'14%',
                        ash_content:7.2,
                        volatiles:25.8,
                        carbon:74.0,
                        S:0.6,
                        water:5.2,
                        full_water:9.0,
                        Y:12.4,
                        G:72.0,
                        mesh:12
                    },
                    {
                        type:'煤1',
                        proportion:'14%',
                        ash_content:7.2,
                        volatiles:25.8,
                        carbon:74.0,
                        S:0.6,
                        water:5.2,
                        full_water:9.0,
                        Y:12.4,
                        G:72.0,
                        mesh:12
                    },
                    {
                        type:'煤1',
                        proportion:'14%',
                        ash_content:7.2,
                        volatiles:25.8,
                        carbon:74.0,
                        S:0.6,
                        water:5.2,
                        full_water:9.0,
                        Y:12.4,
                        G:72.0,
                        mesh:12
                    },
                    {
                        type:'煤1',
                        proportion:'14%',
                        ash_content:7.2,
                        volatiles:25.8,
                        carbon:74.0,
                        S:0.6,
                        water:5.2,
                        full_water:9.0,
                        Y:12.4,
                        G:72.0,
                        mesh:12
                    },
                    {
                        type:'煤1',
                        proportion:'14%',
                        ash_content:7.2,
                        volatiles:25.8,
                        carbon:74.0,
                        S:0.6,
                        water:5.2,
                        full_water:9.0,
                        Y:12.4,
                        G:72.0,
                        mesh:12
                    },
                    {
                        type:'煤1',
                        proportion:'14%',
                        ash_content:7.2,
                        volatiles:25.8,
                        carbon:74.0,
                        S:0.6,
                        water:5.2,
                        full_water:9.0,
                        Y:12.4,
                        G:72.0,
                        mesh:12
                    }


                ],
                coking_x:['2018/9/1','2018/9/2','2018/9/3','2018/9/4','2018/9/5','2018/9/6','2018/9/7'],
                coking_data_K1:[120, 132, 101, 134, 90, 230, 210],
                coking_data_K2:[220, 182, 191, 234, 290, 330, 310],
                coking_data_k3:[150, 232, 201, 154, 190, 330, 410]

            };
        },
        mounted() {
            this.$nextTick(() => {
                const myChart_coal_blending = echarts.init(document.getElementById("coal-blending-content-left"));
                const myChart_coking = echarts.init(document.getElementById("coking-view"));
                const myChart_dry_out = echarts.init(document.getElementById("dry-out"));
                const option_dry_out = {
                    xAxis: {
                        data: this.dry_out_x,
                        axisLabel: {
                            inside: false,
                            textStyle: {
                                color: '#000'
                            },
                            rotate:80

                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },

                        splitLine: {
                            show: false
                        },
                        z: 10
                    },
                    yAxis: {
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#999'
                            },
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                    },
                    dataZoom: [
                        {
                            type: 'inside'
                        }
                    ],
                    series: [
                        {
                            type: 'bar',
                            itemStyle: {
                                normal: {color: '#b5edff'}
                            },
                            barGap: '-100%',
                            barCategoryGap: '40%',
                            data: this.dry_out_data_seven,
                            animation: false
                        },
                        {
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: '#009bcc'
                                },
                            },
                            data:this.dry_out_data_one
                        },
                        {
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: '#838e91'
                                },
                            },
                            data:this.dry_out_data_two

                        },
                        {
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: '#e16269'
                                },
                            },
                            data:this.dry_out_data_three

                        },
                        {
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: '#009bcc'
                                },
                            },
                            data:this.dry_out_data_four

                        },
                        {
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: '#838e91'
                                },
                            },
                            data:this.dry_out_data_five

                        },
                        {
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: '#e16269'
                                },
                            },
                            data:this.dry_out_data_six

                        }
                    ]

                };

                const option_coking = {

                    title: {
                        text: '焦炼作业K线趋势图',
                        left:'center'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.coking_x
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name:'K3',
                            type:'line',
                            stack: '总量',
                            data:this.coking_data_k3
                        },
                        {
                            name:'K2',
                            type:'line',
                            stack: '总量',
                            data:this.coking_data_K2
                        },
                        {
                            name:'K1',
                            type:'line',
                            stack: '总量',
                            data:this.coking_data_K1
                        },


                    ]

                }
                const option_coal_blending = {
                    xAxis: {
                        data: this.coal_blending_x,
                        axisLabel: {
                            inside: false,
                            textStyle: {
                                color: '#000'
                            },
                            rotate:80

                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },

                        splitLine: {
                            show: false
                        },
                        z: 10
                    },
                    yAxis: {
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#999'
                            },
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                    },
                    dataZoom: [
                        {
                            type: 'inside'
                        }
                    ],
                    series: [
                        {
                            type: 'bar',
                            itemStyle: {
                                normal: {color: '#b5edff'}
                            },
                            barGap: '-100%',
                            barCategoryGap: '40%',
                            data: this.coal_blending_data_three,
                            animation: false
                        },
                        {
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: '#009bcc'
                                },
                            },
                            data:this.coal_blending_data_one
                        },
                        {
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: '#838e91'
                                },
                            },
                            data:this.coal_blending_data_two

                        }
                    ]

                };
                myChart_coal_blending.setOption(option_coal_blending);
                myChart_coking.setOption(option_coking);
                myChart_dry_out.setOption(option_dry_out);
            })
        }
    };
</script>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .coal-blending-view,.coking-view {
        width: 100%;
    }
    .coking-view{
        margin-top: 10px;
    }

    .pull-left {
        float: left;
    }

    .coal-blending-header {
        overflow: hidden;
        height: 40px;
    }

    .coal-blending-header-text-one {
        width: 20%;
        height: 40px;
        line-height: 40px;
    }

    .coal-blending-header-text-two {
        width: 80%;
        height: 1px;
        background: #000;
        margin-top: 19.5px;
    }

    .coal-blending-content {
        overflow: hidden;
        width: 100%;
    }

    .coal-blending-content-left {
        width: 30%;
        height: 250px;
    }
    .coal-blending-content-right{
        width: 68%;
        margin-left: 2%;
        height: 250px;
        overflow:scroll;
    }
    .coking-view-content{
        width: 100%;
        height: 250px;
    }
    .coking-button{
        width: 100%;

    }
    .dry-out-content{
        width: 100%;
        height: 250px;
    }
    .table {
        width: 350%;
        max-width: 350%;
        margin-bottom: 20px;
        overflow-x: scroll;
    }


    table {
        background-color: transparent;
        display: table;
    }

    table {
        border-spacing: 0;
        border-collapse: collapse;
    }
    .table>caption+thead>tr:first-child>td, .table>caption+thead>tr:first-child>th, .table>colgroup+thead>tr:first-child>td, .table>colgroup+thead>tr:first-child>th, .table>thead:first-child>tr:first-child>td, .table>thead:first-child>tr:first-child>th {
        border-top: 0;
    }
    .table>thead>tr>th {
        vertical-align: bottom;
        border-bottom: 2px solid #ddd;
    }
    .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
       padding-left: 2px;
        padding-right: 2px;
        padding: 8px 2px;
        line-height: 1.42857143;
        vertical-align: top;
        border-top: 1px solid #ddd;
        text-align: center;
    }
</style>
